<template>
  <el-table :border='border' ref="_accTable" tooltip-effect="dark" @select="handleSelect" @selection-change='handleSelection' @select-all="handleSelectAll" @sort-change="handleSortChange" :max-height="height" :data="tableData" style="width: 100%">
    <el-table-column
    v-if="$scopedSlots.selection"
      type="selection"
      fixed='left'
      width="55">
    </el-table-column>
    <el-table-column
      v-if="$scopedSlots.index"
      type="index"
      width="50">
    </el-table-column>

    <el-table-column
      v-for="(item, index) in columnDefs"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width || null"
      :min-width="item.minWidth || 120"
      :sortable='item.sortable || false'
      :fixed="item.prop === 'action'? 'right' : item.fixed ? item.fixed : false"
      :show-overflow-tooltip="item.showOverflowTooltip === false ? false : true"
    >
      <template #header v-if="item.dropdown">
        <el-dropdown trigger="click" @command="handleCommand(item,arguments)">
          <span class="el-dropdown-link">
            {{item.label}}<i class="el-icon-arrow-down el-icon--right el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :class="{'selected':status.findIndex(item1 => item1.prop === item.prop && item1.column.value === i.value) !== -1}" v-for="(i,inx) in item.options" :key="inx" :command="i"><span>{{i.label}}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <template v-if="$scopedSlots[item.prop]" v-slot='scoped'>
        <slot :name="item.prop" v-bind="{row:scoped.row,index: scoped.$index}"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columnDefs: {
      require: true,
      type: Array,
      default () {
        return []
      }
    },
    tableData: {
      require: true,
      type: Array,
      default () {
        return []
      }
    },
    height: {
      type: String
    },
    border: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  data () {
    return {
      status: []
    }
  },
  methods: {
    handleSortChange (column, prop, order) {
      this.$emit('sortChange', column, prop, order)
    },
    handleSelect (selection, row) {
      this.$emit('select', selection, row)
    },
    handleSelectAll (selection) {
      this.$emit('select-all', selection)
    },
    handleSelection (row) {
      this.$emit('selection-change', row)
    },
    handleCommand (row, command) {
      let index = this.status.findIndex(item => item.prop === row.prop)
      if (index === -1) this.status.push({ prop: row.prop, column: { ...command[0] } })
      else if (this.status[index].column.value !== { ...command[0] }.value) this.status[index].column = { ...command[0] }
      else this.status.splice(index, 1)
      this.$emit('click-header-select', this.status)
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep.el-table .el-table__cell.gutter {
  background-color: #D5DBF2;
}
.el-dropdown-link {
  cursor: pointer;
  color: #909099;
}
.selected {
  background-color: #e8fcfd;
  color: #48e7eb;
}
::v-deep.el-tooltip__popper {
  max-width: 800px;
}
</style>
